import QtQuick 1.0

Rectangle {
    id: navigationButton

    property bool selected: false
    property string iconFilename
    property real iconOpacity: selected ?
        1.0 : root.constants.unselectedIconOpacity;

    signal tapped

    height: width * 2
    radius: width * root.constants.defaultRelativeRadius
    border.width: selected ? root.constants.defaultBorderWidth : 0;
    border.color: selected ?
            root.constants.lighterColor :
            root.constants.transparentColor;
    opacity: selected ? 1.0 : root.constants.unselectedIconOpacity;
    smooth: true

    gradient: Gradient {
        GradientStop { position: 0.0; color: root.constants.activeColorAccent }
        GradientStop { position: 1.0; color: root.constants.activeColor }
    }

    Behavior on opacity {
        NumberAnimation { duration: root.constants.shortAnimationDuration }
    }

    // Icon image.
    Image {
        width: parent.width * 0.6
        height: width
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        z: 1
        opacity: selected ? 1.0 : root.constants.unselectedIconOpacity;
        fillMode: Image.PreserveAspectFit
        smooth: true
        source: navigationButton.iconFilename

        Behavior on opacity {
            NumberAnimation { duration: root.constants.shortAnimationDuration }
        }
    }

    // Background image when pressed.
    Image {
        anchors.fill: parent
        scale: 1.5
        z: 0
        opacity: navigationButtonMouseArea.pressed ? 1.0 : 0.0;
        smooth: true
        source: "hilight_round.png"

        Behavior on opacity {
            NumberAnimation { duration: root.constants.veryShortAnimationDuration }
        }
    }

    MouseArea {
        id: navigationButtonMouseArea
        anchors.fill: parent

        onClicked: {
            haptics.buttonTapFeedback();
            parent.tapped();
        }
    }
}

// End of file.
